<template>
    <div>
        <!--头部-->
        <div class="header">
            <div class="head clearfix">
                <div class="logo"><a href=""><img :src="logo" alt="山东金泰保官网" /></a></div>
                <ul class="nav clearfix">
                    <li v-for="(item, index) in menuList" :key="index" :class="{now: currentNow==item.url}" @click="changeRoute">
                        <router-link :to="item.url">{{item.name}}</router-link>
                    </li>
                    <!-- <li class="now"><a href="index.html">首页</a></li>
                    <li><a href="about.html">公司介绍</a></li>
                    <li><a href="solution.html">行业动态</a></li>
                    <li><a href="product.html">产品中心</a></li>
                    <li><a href="service.html">走进金泰保</a></li>
                    <li><a href="contact.html">招贤纳士</a></li> -->
                </ul>
            <div class="search" v-if="searchFiled">
                <input :v-model="searchFiled" type="text" class="text">
                <input name="" type="submit" class="btn" value="">
            </div>
                <div class="nav_m">
                    <span class="n_icon">&nbsp;</span>
                    <ul>
                        <li v-for="(item, index) in menuList" :key="index" :class="{now: currentNow==item.url}" @click="changeRoute">
                            <router-link :to="item.url">{{item.name}}</router-link>
                        </li>
                        <!-- <li class="now"><a href="index.html">首页</a></li>
                        <li><a href="about.html">公司介绍</a></li>
                        <li><a href="solution.html">行业动态</a></li>
                        <li><a href="product.html">产品中心</a></li>
                        <li><a href="service.html">走进金泰保</a></li>
                        <li><a href="contact.html">招贤纳士</a></li> -->
                    </ul>
                </div>
            </div>
        </div>
        <!--头部-->
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentNow: this.nowUrl
        }
    },
    props: {
        logo: {
            type: String,
            default: function() {
                return ""
            }
        },
        searchFiled: {
            type: String,
            default: function () {
                return ""
            }
        },
        menuList: {
            type: Array,
            default: function() {
                return[
                    {name:'首页', url:'url'}
                ]
            }
        },
        nowUrl:{
            type: String,
            default: function() {
                return ""
            }
        }
    },
    watch: {
        
    },
    methods: {
        changeRoute() {
            this.currentNow = this.$route.path
        }
    },
}
</script>
<style lang="stylus">
.header
    width:100%; margin:0px auto; position:relative; overflow:hidden;
    .head
        width:96%; margin:0px auto; max-width:1200px; height:92px; text-align:left;
        .logo
            width:174px; height:45px; float:left; margin-top:10px;
            img
                height:70px; vertical-align:top;
        .nav
            width:750px; float:right; margin-left:90px; text-align:left;
            li
                display:inline-block; *display:inline; zoom:1; height:89px; border-bottom:3px solid #FFF; line-height:89px; margin-right:5px;
                a 
                    font-size:16px; color:#004587; display:inline-block; *display:inline; zoom:1; height:89px; line-height:89px; padding:0px 27px;
                &.now
                    border-bottom:3px solid #909194; background:#004588;
                    a 
                        color:#FFF;
        .search
            width:135px; height:27px; background:#EEEEEE; float:right; border-radius:27px; -moz-border-radius:27px; -webkit-border-radius:27px; position:relative; margin-top:27px;
            .text 
                width:105px; height:21px; line-height:21px; position:absolute; left:4px; top:3px; padding:0px 5px; border:0px; background:none;
            .btn
                width:30px; height:27px; background:url(s_btn.png) no-repeat center center; position:absolute; right:0px; top:0px; cursor:pointer; border:0px; z-index:99;
        .nav_m 
            display:none; position:relative; width:100%;
            .n_icon
                display:block; width:22px; height:18px; background:url(nav_ico.png) no-repeat; position:absolute; right:10px; top:-50px; z-index:9999; cursor:pointer;
            ul 
                width:100%; border-top:3px solid #002F79; display:none;
                li 
                    width:100%; height:38px; line-height:38px; border-bottom:1px dashed #ddd;
                    a 
                        display:block; width:94%; height:38px; line-height:38px; padding:0px 3%; color:#555;
                        &:hover
                            color:#002F79;
</style>